<template>
  <div>
    <div class="details" style="
    height: 100%;
    margin-top: 0;
    padding: 5%;"
         :style="'background-color:'+theme.secondaryBackground">
      <!--      标题-->
      <div align="center">
        <a href="" style="font-size: 2em;" :style="'color:'+theme.numberOneTextColor">{{article_details.title}}</a>
      </div>
      <!--      简单数据-->
      <div align="center"
           style="font-size: 1.0em;padding-bottom: 1em;margin-top: 1em" :style="'color:'+theme.numberTwoFontColor">
        <i class="el-icon-time"></i> {{article_details.updateTime}}
        <el-divider direction="vertical"></el-divider>
        <i class="el-icon-ice-cream-square"></i> {{article_details.thumbUpNumber}}
        <el-divider direction="vertical"></el-divider>
        神奇的数字: {{article_details.browseTheNumber}}
      </div>
      <div v-highlight v-html="content"  :style="'background-color:'+theme.secondaryBackground+';color:'+theme.numberTwoFontColor"></div>
    </div>


    <comment :comment_list=this.comment_list :aid=this.aid></comment>


  </div>
</template>

<script>
  import comment from '@/components/comment';

  export default {
     name: 'TheArticleDetails',
    components: {
      comment,
    },
    data() {
      return {
        aid: 0,
        content: '',
        article_details: {},

        comment_list: [], // 评论的列表

        theme: {},

      };
    },
    create() {

    },
    mounted() {
      const _t = this;

      // 初始化系统
      _t.theme = _t.$store.getters.getTheme;
      _t.aid = _t.$route.query.aid;


      // 获取文章的详情
      _t.$http.get(`${_t.ARTICLE_API}/article_details/${_t.aid}`)
        .then((res) => {
          _t.article_details = res.data.result;
          _t.content = _t.$marked(_t.article_details.content);
        });


      //  获取文章的评论列表
      _t.$http.get(`${_t.COMMENT_API}/all_reviews/${_t.aid}`)
        .then((res) => {
          _t.comment_list = res.data.result;
        });
    },
    methods: {
    },
  };
</script>


<style scoped>

  @import "../static/css/md/markdown.css";

  .details {
    height: 100%;
    margin-top: 0;
    padding: 5%;
  }
</style>
